<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- 
        1.一个重要的内置关系：VueComponent.prototype.__proto_=== Vue.prototype
        2.为什么要有这个关系：让组件实例对象（vc）可以访问到Vue原型上的属性、方法。
    -->


    <div id="root">
        <!-- 第三步：使用组件 -->
        <app></app>
    </div>
</body>
    <script>
        Vue.prototype.x=99

        // 第一步：创建student组件
        const student = Vue.extend({
            template:`
                <div>
                    <h2>学生名：{{name}}</h2>
                    <h2>年龄：{{age}}</h2>
                </div>            
            `,
            data() {
                return {
                    name:'lee',
                    age:'22'
                }
            }
        })
        // 第一步：创建school组件
        const school = Vue.extend({
            template:`
                <div>
                    <h2>学校名：{{name}}</h2>
                    <h2>学校地址：{{address}}</h2>
                    <button @click='tip()'>点我提示学校名</button>
                    <hr>
                    <student></student>
                </div>            
            `,
            data() {
                return {
                    name:'ZH',
                    address:'ZZ'
                }
            },
            methods: {
                tip() {
                    alert(this.name)
                }
            },
            components:{
                student
            }
        })

        // 第一步：创建hello组件
        const hello = Vue.extend({
            template:`
                <div>
                    <h2>{{msg}}</h2>
                </div>            
            `,
            data() {
                return {
                    msg:'hello'
                }
            }
        })

        // 创建全局组件
        const app = Vue.extend({
            template:`
                <div>
                    <school></school>
                    <hello></hello>
                    <button @click='show()'>点我验证内置关系</button>
                </div>
            `,
            components:{
                school,
                hello
            },
            methods:{
                show() {
                    console.log(this.x)
                }
            }
        })

        console.log(app)


        new Vue({
            el:'#root',
            // 第二步：注册组件 (局部注册)
            components: {
                app
            }
        })
    </script>
</html>